<template>
    <div v-loading="loading">
        <el-form ref="form" :disabled="view" :model="form" :rules="rules" label-width="160px" label-suffix="：">
            <el-form-item label="店铺" prop="name">
                <el-select v-model="form.shop_id" placeholder="请选择店铺" clearable>
                    <el-option v-for="item in shopOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入商品名称" />
            </el-form-item>
            <el-form-item label="时长" prop="duration">
                <el-input-number v-model="form.duration" step-strictly :min="1" />
                <span>（分钟）</span>
            </el-form-item>
            <el-form-item label="销售价" prop="price">
                <el-input-number v-model="form.price" :min="0.01" :precision="2" />
                <span class="m-l">元</span>
            </el-form-item>
            <el-form-item label="描述" prop="description">
                <el-input v-model="form.description" type="textarea" placeholder="请输入商品描述" />
            </el-form-item>

            <el-form-item label="启用" prop="status">
                <el-radio-group v-model="form.status">
                    <el-radio :label="1">启用</el-radio>
                    <el-radio :label="0">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

export default {
    props: {
        id: {
            type: [Number, String],
            default: ''
        },
        view: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            shopOptions: [],
            dialogFormVisible: false,
            remoteLoading: false,
            loading: false,
            form: {
                id: this.id,
                shop_id: '',
                name: '', // 商品名称
                duration: 10, // 时长
                price: 10, // 价格
                type: '', // 类型
                description: '', // 描述
                status: 1 // 状态
            },

            rules: {
                name: [{ required: true, message: '请完善信息', trigger: 'blur' }],
                duration: [{ required: true, message: '请完善信息', trigger: 'blur' }],
                price: [{ required: true, message: '请完善信息', trigger: 'blur' }],
                description: [{ required: true, message: '请完善信息', trigger: 'blur' }]
            }
        }
    },
    watch: {

    },

    async mounted() {
        this.getShopList()
        // 编辑
        if (this.form.id != '') {
            await this.getInfo()
        }
    },
    methods: {
        getShopList() {
            this.$api.post('member/member/tabulation').then(res => {
                this.shopOptions = res.data.data.map(item => {
                    return {
                        label: item.nickname,
                        value: item.id
                    }
                })
            })
        },
        getInfo() {
            this.loading = true
            return this.$api.post('member/menu/detail', { id: this.form.id }).then(res => {
                this.loading = false
                const data = res.data.data
                this.form = Object.assign(this.form, data)
                this.$refs.skuForm.init()
            })
        },
        submit(callback) {
            const params = {
                ...this.form
            }
            if (this.form.id == '') {
                this.$refs['form'].validate(valid => {
                    if (valid) {

                        this.$api.post('member/menu/create', params).then(() => {
                            this.$message.success({
                                message: '新增成功',
                                center: true
                            })
                            callback && callback()
                        })
                    } else {
                        this.$message.warning('请完善商品SKU信息')
                    }
                })
            } else {
                this.$refs['form'].validate(valid => {
                    if (valid) {

                        this.$api.post('member/menu/update', params).then(() => {
                            this.$message.success({
                                message: '编辑成功',
                                center: true
                            })
                            callback && callback()
                        })

                    } else {
                        this.$message.warning('请检查并完善表单')
                    }
                })
            }
        }
    }
}
</script>
